<template>
  <div>
    <!-- 1.404页面提示信息 -->
    <div id="info">
      <p>温馨提醒：您所访问的页面不存在或者已删除。</p>
      <p>玩个游戏吧《圈小猫》</p>
    </div>
    <div id="catch-the-cat"></div>
		<!-- 3.返回主页 -->
	  <div id="returnHome">
		  <img src="@/assets/images/home2.png" alt="博客首页" width="30px" height="30px" />
		  <a href="/" title="返回首页">&nbsp;返回首页</a> 
	  </div>
  	<!-- 4.右上角gitee的链接条 -->
    <a href='https://gitee.com/konkoncar/nowablog' id="forkmeongitee">
      <img src='https://gitee.com/konkoncar/nowablog/widgets/widget_1.svg' alt='Fork me on Gitee' />
    </a>
  </div>
</template>

<script>
import '@/assets/js/phaser.min.js'
import '@/assets/js/catch-the-cat.js'
import { setDocumentTitle, domTitle } from '@/utils/domUtil'
export default {
  name: 'Exception404',
  mounted () {
    setDocumentTitle(`${this.$route.meta.title || '404'} - ${domTitle}`)
    window.game = new CatchTheCatGame({
			w : 11,
			h : 11,
			r : 20,
			backgroundColor : 0xffffff,
			parent : 'catch-the-cat',
			statusBarAlign : 'center',
			credit : 'DavidLee/NowaBlog'/* 该属性可以设置画布右下角的角标 */
		});
  }
}
</script>
<style>
* {
	padding: 0;
	margin: 0
}
body {
	background-color: #eeeeee;
}
/* 游戏画布样式  */
#catch-the-cat {
	width: 100%;
	margin-top: 20px;
	text-align: center;
}
#info,#returnHome {
	text-align: center;
	/* border: solid 1px grey; */
	margin-top: 10px;
}
#info p{
  font-size: 25px;
  margin-bottom: 0.2em;
}
#returnHome a {
	text-decoration: none;
	color: #5bace2;
	font-size: 25px;
	line-height: 30px;
}
#returnHome a:HOVER {
	text-decoration: underline;
	color: #0099FF;
}
a#forkmeongitee {
  position: absolute;
  top: 0;
  right: 0;
}
@media (max-width:500px) {
  #info,
  #catch-the-cat { width: 100%; }
}
</style>
